<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .top-mid {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(215, 215, 215);
        color: white;
        height: 25px;
        padding: 5px;
      }
      .mid {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .t1 {
        display: flex;
        justify-content: flex-start;
      }
      .t2 {
        display: flex;
        justify-content: flex-start;
        height: 200px;
      }
      .t3 {
        display: flex;
        justify-content: flex-start;
        height: 50px;
      }
      .s1 {
        padding: 20px;
        color: red;
        font-size: 20px;
      }
      .demo {
        border-collapse: separate;
        border-spacing: 0px 20px;
      }
      .td1 {
        padding: 10px;
        background-color: #808080;
        width: 150px;
      }
      .td2 {
        width: 50px;
        background: white;
      }
      .q1 {
        padding-top: 30px;
      }
      .ul1 {
        padding-right: 270px;
        list-style: none;
      }
      .sel {
        padding-right: 510px;
      }
      .d1 {
        padding-right: 40px;
      }
      #sel1 {
        margin-right: 10px;
      }
      .sel-2 {
        padding-right: 530px;
      }
      .mid-padding {
        display: flex;
        justify-content: center;
        padding: 30px;
      }
      #button {
        margin: 10px;
        width: 100px;
        height: 35px;
        background-color: red;
        color:white;
      }
      .table-1 {
        border-spacing: 0 50px;
      }
      #input-w{
        width: 250px;
      }
    </style>
  </head>
  <body>
    <div class="top-mid">
      <p>购车意向</p>
    </div>
    <div class="mid">
      <div class="t1">
        <div class="q1"><span>申请试驾车型</span><span class="s1">*</span></div>
        <table class="demo">
          <tr>
            <td class="td1">XE</td>
            <td class="td2"></td>
            <td class="td1">F-PACE</td>
            <td class="td2"></td>
            <td class="td1">XF 80周年典藏版</td>
          </tr>
          <tr>
            <td class="td1">XJ 8周年典藏版</td>
            <td class="td2"></td>
            <td class="td1">F-TYPE</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="mid">
      <div class="t2">
        <div><span>具体车型</span><span class="s1">*</span></div>
        <ul class="ul1">
          <li><input type="radio" name="car" id="" />XE R-Sport运动版2.0升200马力涡轮增压</li>
          <li><input type="radio" name="car" id="" />XE R-Sport运动版2.0升240马力涡轮增压</li>
          <li><input type="radio" name="car" id="" />XE S高性能版3.0升340马力机械增压</li>
        </ul>
      </div>
    </div>
    <div class="mid">
      <div class="t3">
        <div class="d1"><span>申请试驾车型</span></div>
        <div class="sel">
          <select name="" id="sel1">
            <option value="">2015</option>
            <option value="">2014</option>
            <option value="">2013</option>
            <option value="">2012</option>
            <option value="">2011</option>
          </select>
          <select name="" id="">
            <option value="">12</option>
            <option value="">11</option>
            <option value="">10</option>
            <option value="">9</option>
            <option value="">8</option>
            <option value="">7</option>
            <option value="">6</option>
            <option value="">5</option>
            <option value="">4</option>
            <option value="">3</option>
            <option value="">2</option>
            <option value="">1</option>
          </select>
        </div>
      </div>
    </div>
    <div class="mid">
      <div class="t3">
        <div class="d1"><span>预计价格区间</span></div>
        <div class="sel-2">
          <select name="" id="sel1">
            <option value="">30~60万</option>
            <option value="">60~90万</option>
            <option value="">90~120万</option>
          </select>
        </div>
      </div>
    </div>
    <div class="top-mid">
      <p>个人信息</p>
    </div>
    <div class="mid">
      <table class="table-1">
        <tr>
          <td>姓名<span class="s1">*</span></td>
          <td colspan="2"><input type="text" name="" id="input-w" /></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>性别<span class="s1">*</span></td>
          <td><input type="radio" name="sex" id="" />男士</td>
          <td><input type="radio" name="sex" id="" />女士</td>
          <td></td>
        </tr>
        <tr>
          <td>手机<span class="s1">*</span></td>
          <td colspan="2"><input type="text" name="" id="input-w" /></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>电子邮箱<span class="s1">*</span></td>
          <td colspan="2"><input type="email" name="" id="input-w" /></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>省<span class="s1">*</span></td>
          <td>
            <select name="" id="">
              <option value="" selected>北京</option>
              <option value="">湖北</option>
              <option value="">四川</option>
              <option value="">湖南</option>
            </select>
          </td>
          <td>市</td>
          <td>
            <select name="" id="">
              <option value="" selected>北京</option>
              <option value="">武汉</option>
              <option value="">成都</option>
              <option value="">长沙</option>
            </select>
          </td>
        </tr>
      </table>
    </div>
    <div class="top-mid">
      <p>已有车辆信息</p>
    </div>
    <div class="mid">
      <table class="table-1">
        <tr>
          <td>已拥有车</td>
          <td><input type="radio" name="YorN" id="" />是</td>
          <td><input type="radio" name="YorN" id="" />否</td>
        </tr>
        <tr>
          <td>目前使用的汽车品牌</td>
          <td colspan="2"><input type="text" name="" id="input-w" /></td>
        </tr>
      </table>
    </div>
    <p class="mid-padding">
      我特此授权捷豹中国保留我的数据以便解答我的问题;我所提供的信息按照数据保护规定进行保留，我同意捷豹中国把我的数据用于营<br />
      销、调查和统计目的.并允许擅豹中国根据我所提供的信息与我联系。
    </p>
    <div class="mid-padding">
      <input type="radio" name="" id="" />我同意此协议
    </div>
    <div class="mid">
      <input type="button" name="" id="button" value="申请预约" />
    </div>
  </body>
</html>
